<template>
  <div class="Login-container">
    <!-- 登陆 -->
    <div class="Login">
      <!-- 表单头像 -->
      <div class="LoginImg">
        <img src="../../assets/logo.png" />
      </div>
      <!-- 用户验证表单 -->
      <el-form
        ref="loginFromRes"
        :model="LoginFrom"
        :rules="LoginRules"
        class="LoginFrom"
        label-width="0px"
      >
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="LoginFrom.username" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input type="password" v-model="LoginFrom.password" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <!-- 登陆 取消 -->
        <div class="Btn">
          <el-button type="primary" @click="Login">登陆</el-button>
          <!-- 重制密码 -->
          <el-button type="info" @click="FormReset">重置</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { Login } from '@/api/api.js'
export default {
  name: 'BackShopLogin',

  data () {
    return {
      // 登陆账号密码
      LoginFrom: {
        username: 'admin',
        password: '123456'
      },
      // 校验账号密码
      LoginRules: {
        // 校验账号
        username: [
          { required: true, message: '请输入账号昵称', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入账号密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ]
      }
    };
  },

  mounted () {

  },

  methods: {
    // 重制账号密码取消校验
    FormReset () {
      this.$refs.loginFromRes.resetFields()
    },
    // 根据表单预验证是否发起网络请求
    Login () {
      // validate elementui 验证表单 返回一个函数
      this.$refs.loginFromRes.validate(async val => {
        // 判断是否为被执行
        if (!val) return;
        // 提交用户信息
        const { data } = await Login(this.LoginFrom)
        console.log(data);
        // const { data } = await this.$http.post('login', this.LoginFrom);
        // 判断状态吗不等于200则请求失败
        if (data.meta.status != 200) return this.$message.error('登陆失败!');
        // 否则返回成功
        this.$message.success('登陆成功！')
        // 存储tokne值
        window.sessionStorage.setItem('token', data.data.token);
        // 登陆成功跳转home
        this.$router.replace('/home')
      })
    }
  },
};
</script>

<style lang="less" scoped>
.Login-container {
  width: 100%;
  height: 100%;
  background: #0f2027;
  background: -webkit-linear-gradient(
    to right,
    #2c5364,
    #203a43,
    #0f2027
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    #2c5364,
    #203a43,
    #0f2027
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  // 登陆框
  .Login {
    width: 500px;
    height: 320px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    // 登陆头像
    .LoginImg {
      width: 120px;
      height: 120px;
      padding: 10px;
      border-radius: 50%;
      border: 1px solid #eee;
      box-shadow: 0 0 10px #2c5364;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      img {
        border-radius: 50%;
        width: 120px;
        height: 120px;
        background-color: #eee;
      }
    }
    // 登陆表单
    .LoginFrom {
      width: 100%;
      position: absolute;
      bottom: 50px;
      padding: 0px 10px;
      box-sizing: border-box;
      .Btn {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>